<template>
  <div class="banner" style="width: 100%;margin-top: 0px !important;padding-top: 0px" >
    <Player/>
    <!---->



    <div style="width: 100%;overflow: hidden">

      <a @click="$router.push('/dashboard')"
         style="color: white;font-size: small;position: relative;top:60px;left: 1300px;font-weight: bold"
         class="banner-title">首页</a>

      <a @click="$router.push('/message')"
         style="color: white;font-size: small;position: relative;top:60px;left: 1310px;font-weight: bold"
         class="banner-title">留言</a>
      <a @click="$router.push('/show')"
         style="color: white;font-size: small;position: relative;top:60px;left: 1320px;font-weight: bold"
         class="banner-title">江湖</a>
      <a @click="$router.push('/blogStore')"
         style="color: white;font-size: small;position: relative;top:60px;left: 1330px;font-weight: bold"
         class="banner-title">商城</a>
      <el-card class="box-card ">
        <h1 style="text-align: center;margin-top: 300px" >我的博客</h1>
        <el-avatar :src="form.avatar" style="position: relative;top: 30px;height: 80px;width: 80px"></el-avatar>
        <span style="margin-left: 5px;top: -25px; position: relative;font-weight: bold;color: white;font-size: large"
              id="blink;"> {{form.nick}}</span>
        <span
          style="border-radius: 20px;color: cornsilk;font-weight: bold;position: relative;top: -25px;margin-left: 8px; ;">{{form.sex}}</span>
        <div
          style="border-radius: 20px;color: skyblue;font-weight: bold;position: relative;top: -25px;margin-top: 20px;margin-left: 90px">
          {{form.introduce}}
        </div>
      </el-card>
    </div>


    <div style="background-color: #f4f5f7;border-color: #f4f5f7;height: 50px">
      <h4 style=";margin-left: 1050px;padding-top: 20px"> Hi,😀今天又学到新知识了吗?快快记录下来吧，<a style="color: #409EFF"
                                                                                    @click="$router.push('/editor')">点击发表文章!</a>
      </h4>
    </div>


    <!--展示-->
    <el-row style="margin-left: 370px" v-for="item in forms" v-if="item.author === form.nick">
      <el-col :span="16" style="margin-top: 10px">
        <el-card :body-style="{ padding: '10px' }" style="height: 150px">

          <div style="padding: 14px;">
            <a @click="open(item)"><h3 style="margin-top: -4px" id="click">{{item.title}}</h3></a>
            <p style="margin-top: -4px;font-size: smaller;margin-left: 1px;margin-top: 5px">{{item.title}}</p>
            <span style="font-size: small;position: relative;top: 20px;">分类：{{item.category}}</span>
            <span class="svg-container" style="margin-left: 20px">
          <svg-icon icon-class="time" style="position: relative;top: 20px;"/>

              <span style="font-size: small;position: relative;top: 20px;">{{item.time}}</span>
        </span>
            <el-button type="danger" style="margin-left: 550px" @click="handleDelete(item.id)"
                       slot="reference">删除
            </el-button>
            <el-button type="primary" @click="open1(item.id)">编辑</el-button>
          </div>
        </el-card>
      </el-col>


    </el-row>

    <div style="background-color: #f4f5f7;border-color: #f4f5f7;height: 50px">
      <h5 style="text-align: center;padding-top: 20px;font-size: small"> 没有更多了😀 <a @click="$router.push('/show')"
                                                                                    style="color: #409EFF">想了解更多请点击</a>
      </h5>
    </div>


    <div app padless absolute>
      <div class="footer-wrap" style="margin-top: 70px">
        <div>©2021 - {{ new Date().getFullYear() }} By chenchao</div>
        <a href="https://beian.miit.gov.cn/" target="_blank">
          邮箱：2776895893@qq.com
        </a>
      </div>
    </div>
  </div>
</template>

<script>
  import request from '../utils/request'

  import E from 'wangeditor'
  import particles from '../components/particles/index'
  import '../../public/ribbon'
  import Player from '../components/zw-player/player.vue'

  let editor
  export default {
    name: 'Myblog',
    components: { particles, Player },
    data() {
      return {

        form: {},
        forms: [],
        // vis: false,
        // tmpTitle: '',
        tmpItem: {
          category: '',
          author: '',
          content: '',
          id: '',
          time: '',
          title: ''
        }
        // dialogVisible: false
      }
    },

    created() {

      this.load()
      let str = sessionStorage.getItem('user')
      this.form = JSON.parse(str)
      //判断性别并替换
      if (this.form.sex === '男') {
        this.form.sex = '♂'
      }
      else if (this.form.sex === '女') {
        this.form.sex = '♀'
      }

      request.get('/news').then(res => {
        this.forms = res.data.reverse()
        // sessionStorage.setItem('blog', JSON.stringify(res))
      })
    },

    methods: {
      load() {
        request.get('/news/selectPage', {
          params: {
            pageNum: this.currentPage,
            pageSize: this.pageSize

          }

        }).then(res => {
          this.total = res.data.size
        })

      },

      open1(id) {
        let id1 = this.tmpItem.id
        this.$router.push({
          path: '/UpdateBlog/',

          query: { id }
        })
      },

      //打开弹窗
      open(item) {
        // this.vis = true
        // if (item) {
        //   // console.log(item)
        //   this.tmpItem = item
        // }
        console.log(item)
        let id = item.id
        this.$router.push({
          path: '/Detail/',
          query: { id }
        })
      },

      //删除
      handleDelete(id) {
        let _this = this
        console.log('外层：', this)
        this.$confirm('你确定要删除,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          request.delete('/news/deleteNew/' + id).then(res => {
            console.log('内层：', this)
            this.$message({ type: 'success', message: '删除成功!' })
            for (let i = 0; i < _this.forms.length; i++) {
              if (_this.forms[i].id === id) {
                _this.forms.splice(i, 1)
                break
              }
            }

          })

          this.load()
        }).catch(() => {
          this.$message({ type: 'success', message: '已取消删除' })
        })

      }

    }
  }
</script>

<style scoped>


  .box-card {
    /*background-image: url("https://www.static.talkxj.com/config/a6f141372509365891081d755da963a1.png")*/
    height: 100vh;
    background: url('https://statics.twinkle-leaf.cn/image/girlFish.jpg') no-repeat center center/cover;
    /*transition: 3s all;*/

  }

  .footer-wrap {
    width: 100%;
    line-height: 2;
    position: relative;
    padding: 40px 20px;
    color: #eee;
    font-size: 14px;
    text-align: center;
    background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: Gradient 10s ease infinite;
  }

  .footer-wrap a {
    color: #eee !important;
  }

  @keyframes Gradient {
    0% {
      background-position: 0 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }
</style>
